<script setup lang="ts">
import { ref } from 'vue'
import { getNavbarTops, getTiktokList } from '@/api/tiktok'
import type { Tiktok } from '@/api/interface'

const navbarTops = ref<Tiktok.TiktokNavBarTops[]>([])
const navbarTopActive = ref<number>(-1)
const getNavbarTopsSetup = async () => {
    const response = await getNavbarTops()
    navbarTops.value = response
}
getNavbarTopsSetup()

const changeNavbarTop = (act: number) => {
    navbarTopActive.value = act
}

const tiktokList = ref<Tiktok.TiktokListResult[]>([])
const getTiktokListSetup = async () => {
    const response = await getTiktokList()
    tiktokList.value = response
}
getTiktokListSetup()

const openHandler = (item: Tiktok.TiktokListResult) => {
    if (!item.link) return
    window.open(item.link)
}
</script>

<template>
    <div class="tiktok-container base-container">
        <div class="navbar-top">
            <div
                class="navbar-top-item"
                :class="[navbarTopActive === -1 && 'navbar-top-item-active']"
                @click="changeNavbarTop(-1)"
            >
                <span>全部</span>
            </div>
            <div
                class="navbar-top-item"
                :class="[
                    navbarTopActive === item.id && 'navbar-top-item-active',
                ]"
                v-for="item in navbarTops"
                :key="item.id"
                @click="changeNavbarTop(item.id)"
            >
                <span>{{ item.title }}</span>
            </div>
        </div>
        <div class="content">
            <div
                class="content-card"
                v-for="item in tiktokList"
                :key="item.id"
                @click="openHandler(item)"
            >
                <div class="content-card-cover">
                    <img :src="item.cover" alt="cover" />
                    <div class="content-card-cover-absolute"></div>
                </div>
                <div class="content-card-title">{{ item.title }}</div>
                <div class="content-card-tag">
                    <div
                        class="content-card-tag-item"
                        v-for="child in item.tags"
                        :key="child.id"
                    >
                        #{{ child.title }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use './index.scss';
</style>
